<template>
    <div>
        <el-container class="body">
            <el-header>
                <div class="headerConfig">
                    <div class="headerLeft"> 校园帮管理后台 </div>
                    <div class="headerRight">
                        <p>hello:{{ getAdmin }}</p>
                        <el-button @click="logout">退出</el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-col :span="24">
                        <h5>默认颜色</h5>
                        <el-menu :default-active="menu" class="el-menu-vertical-demo" @select="selectMenu">

                            <el-menu-item index="Admin">
                                <i class="el-icon-user-solid"></i>
                                <span slot="title">管理员管理</span>
                            </el-menu-item>
                            <el-menu-item index="Order">
                                <i class="el-icon-s-release"></i>
                                <span slot="title">订单管理</span>
                            </el-menu-item>
                            <el-menu-item index="Total">
                                <i class="el-icon-s-operation"></i>
                                <span slot="title">订单统计</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-aside>
                <el-container>
                    <el-main>
                        <router-view></router-view>
                    
                    </el-main>
                    <el-footer>版权所有 江小黑 v1.0</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    data(){
        return{
            menu:'Admin',
        }
    },
    mounted(){
        this.menu = this.$route.name
    },
    computed: {
        getAdmin() {
            const admin = localStorage.getItem('admin')
            if (admin) {
                const { nickName } = JSON.parse(localStorage.getItem('admin'))
                if (nickName) {
                    return nickName
                } else { this.$router.push({ name: 'Login' }) }
            } else { this.$router.push({ name: 'Login' }) }
        }
    },
    methods: {
        logout() {
            localStorage.removeItem('admin')
            this.$router.push({ name: 'Login' })
        },
        selectMenu(key, keyPath) {
            // console.log(key,keyPath) 
            this.$router.push({ name: key })
        }
    }

}
</script>

<style lang="scss" scoped>
.body {
    height: 100vh;

    .el-header {
        background: linear-gradient(to right, rgb(247, 107, 221), rgb(255, 255, 255));

        .headerConfig {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .headerLeft {
                color: #fff;
                font-size: 20px;
                font-weight: bold;
            }

            .headerRight {
                display: flex;
                align-items: center;

                p {
                    margin-right: 20px;
                }

                .el-button {
                    height: 40px;
                }
            }
        }
    }
}

.el-footer {
    background: linear-gradient(to right, rgb(247, 107, 221), rgb(255, 255, 255));
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #fff;
    color: #333;
    text-align: center;
    border-right: 1px solid #B3C0D1;
}

//增加.el-menu 
.el-menu {
    border: none
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
}
</style>